<style scoped>
.schart {
  width: 600px;
  display: inline-block;
}
.search {
  margin: 20px 40px;
}
</style>

<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
            <el-breadcrumb-item>用户统计数据</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="schart">
      <div id="chartLine1" style="width:500px; height:400px;"></div>
      <div>
        <el-date-picker
          class="search"
          v-model="lexi"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" @click="search('lexi')" :loading="loading">查询</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      lexi: undefined,
      lexiSummary: {
        ref_date: [],
        sub_count: [],
        sub_day: [],
        unsub_day: [],
        user_count: [],
        user_day: [],
        unsub_count: []
      },
      school: undefined,
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted() {
    APP.ajax('analysis/lexiSummary', {}, res => {
      this.dataRectification(res.data.data)
      this.drawLexiLineChart()
    })
  },
  methods: {
    dataRectification(data) {
      for (let key in this.lexiSummary) {
        this.lexiSummary[key] = []
      }
      data.forEach(element => {
        this.lexiSummary.ref_date.push(element.created_at.substring(5))
        this.lexiSummary.sub_count.push(element.sub_count)
        this.lexiSummary.sub_day.push(element.sub_day)
        this.lexiSummary.user_count.push(element.user_count)
        this.lexiSummary.user_day.push(element.user_day)
        this.lexiSummary.unsub_day.push(element.unsub_day)
        this.lexiSummary.unsub_count.push(element.unsub_count)
      });
    },
    drawLexiLineChart() {
      this.chartLine = echarts.init(document.getElementById('chartLine1'))
      this.chartLine.setOption({
        title: {
          text: '乐洗用户统计数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [
            '',
            '',
            '累积关注总数',
            '新增关注数量',
            '累积取关总数',
            '新增取关数量',
            '累积用户总数',
            '新增用户数量'
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          boundaryGap: false,
          data: this.lexiSummary.ref_date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累积关注总数',
            type: 'line',
            data: this.lexiSummary.sub_count,
            itemStyle: {
              normal: {
                color: 'red'
              }
            },
            lineStyle: {
              color: 'red'
            }
          },
          {
            name: '新增关注数量',
            type: 'line',
            data: this.lexiSummary.sub_day,
            itemStyle: {
              normal: {
                color: 'yellow'
              }
            },
            lineStyle: {
              color: 'yellow'
            }
          },
          {
            name: '累积取关总数',
            type: 'line',
            data: this.lexiSummary.unsub_count,
            itemStyle: {
              normal: {
                color: 'blue'
              }
            },
            lineStyle: {
              color: 'blue'
            }
          },
          {
            name: '新增取关数量',
            type: 'line',
            data: this.lexiSummary.unsub_day,
            itemStyle: {
              normal: {
                color: 'green'
              }
            },
            lineStyle: {
              color: 'green'
            }
          },
          {
            name: '累积用户总数',
            type: 'line',
            data: this.lexiSummary.user_count,
            itemStyle: {
              normal: {
                color: '#663366'
              }
            },
            lineStyle: {
              color: '#663366'
            }
          },
          {
            name: '新增用户数量',
            type: 'line',
            data: this.lexiSummary.user_day,
            itemStyle: {
              normal: {
                color: '#cc3366'
              }
            },
            lineStyle: {
              color: '#cc3366'
            }
          }
        ]
      })
    },
    search(name) {
      this.loading = true
      if (this[name] === undefined) {
        this.$message.info('请输入时间!')
        this.loading = false
        return
      }
      // 发送数据的from
      let from =
        this[name].getFullYear() +
        '-' +
        (this[name].getMonth() + 1) +
        '-' +
        this[name].getDate()
      // 发送数据的to
      let to = new Date(this[name])
      // 时间加6天，为当周的时间 1-7
      to.setDate(this[name].getDate() + 6)
      // 如果日期大于今天，则等于昨天(不能等于今天，否则报错)
      if (to >= new Date()) {
        to = new Date()
        to =
          to.getFullYear() +
          '-' +
          (to.getMonth() + 1) +
          '-' +
          (to.getDate() - 1)
      } else {
        to = to.getFullYear() + '-' + (to.getMonth() + 1) + '-' + to.getDate()
      }
      APP.ajax('analysis/lexiSummary', { from: from, to: to }, res => {
        this.dataRectification(res.data.data);
        this.drawLexiLineChart();
        this.loading = false;
      })
    }
  }
}
</script>
